<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewpor" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- @click.prevent="doThis" prevent修饰符代表阻止事件的默认行为 -->
        <a href="https://www.baidu.com" @click.prevent="doThis">百度</a>

        <!-- 
        @click.stop.prevent="doThis" 
        事件修饰符可以串联 并先后依次执行
        stop 阻止事件传播
        prevent 阻止事件的默认行为（a标签的点击默认行为是跳转其href对应的位置）
        -->
        <div @click="doThis" style="padding:5px;background-color:#ccc">
            <a href="https://www.baidu.com" @click.stop.prevent="doThis">百度</a>
        </div>
        <hr>

        <!-- 
        @submit.prevent="onSubmit" 
        prevent修饰符阻止了表单的默认提交行为
        -->
        <form @submit.prevent="onSubmit" action="https://www.baidu.com">
            <input type="text">
            <button>提交</button>
        </form>
        <hr>

        <!-- 
        @click.self="doThis"
        self修饰符 事件必须发生在自己身上才会触发处理函数 
        e.target此时与e.currentTarget相等
         -->
        <div @click.self="doThis" style="padding:5px;background-color:#ccc">
            <span>百度</span>
        </div>
        <hr>

        <!-- 点击事件只会触发一次 -->
        <a @click.once="doThis">click me</a>

    </div>

    <script>
        Vue.createApp({
            methods:{
                doThis(e){
                    // 打印事件源（事件注册在谁身上谁就是事件源 e.target是事件的末梢元素）
                    console.log("doThis",e.currentTarget);
                },
                onSubmit(){
                    console.log("onSubmit");
                }
            }
        }).mount('#app')
    </script>
</body>

</html>